
.popup-box{
  perspective: 500;
  position: fixed;
  left:0;
  top:100vh;
  
  background: rgba(255,255,255,0.6);
  width:750rpx;
  box-shadow: 0 -10rpx 10rpx 2rpx rgba(180,180,180,0.3);
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  padding-bottom:10px;
  .move-btn{
    width:100%;
    height:50rpx;
    justify-content: center;
    align-items: center;
    .line{
      width:100rpx;
      height:10rpx;
      background:#999999;
      border-radius: 5rpx;
    }
  }
}
.safe-area-inset-bottom{
  padding-bottom:calc(var(--safe-area-inset-bottom) + 10px);
}
.content-box{
  width:750rpx;
  height:100%;
  
}
.popup-transition{
  transition: transform 0.2s ease-in;
}
.mask{
  opacity: 0;
  width:750rpx;
  height:100vh;
  background:rgba(0,0,0,0.2);
  position: fixed;
  top:0;
  left:0;
  transition: opacity 0.2s ease-in;
}
.show-mask{
  opacity: 1;
}
.hide-mask{
  opacity: 0;
}
.flex{
  display:flex
}
.row{
  flex-direction: row;
}
.col{
  flex-direction: column;
}
